<template>
	<view class="content">
		
		<view class="top-content">
			<view class="typeContent">
				<view class="change">选择账单类型</view>
				<view class="cords" @tap="exchange(3)" v-if="index == 2">兑换多多券</view>
				<view class="cords" @tap="exchange(2)" v-if="index == 3">兑换多多券</view>
			</view>
			<view class="currency">
				<picker @change="bindPickerChange" :value="index" :range="navList">
					<view class="uni-input">{{navList[index]}}</view>
				</picker>
			</view>
		</view>
		
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="top">
				<view class="title">{{item.recordType}}</view>
				<view class="price" :style="item.changeType == 1?'':'color:#231815'">{{item.changeType==1?'+':'-'}}{{item.walletNum}}</view>
			</view>
			<view class="top">
				<view class="time">{{item.createTime}}</view>
				<view class="status" :style="item.status==0?'color:#999999':item.status==1?'color:#408FFF':''">{{item.status==0?'待审核':item.status==1?'审核通过':'审核驳回'}}</view>
			</view>
		</view>
		<view class="noneContent" v-if="list.length == 0">
			<image src="../../static/withdraw/noneCard.png" class="noneImg"></image>
			<view class="tips">暂无数据</view>
		</view>
		
		
		<view class="prop" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">{{index == 0?'多多券兑换多贝':index == 2?'兑换券兑换多多券':'兑换额兑换多多券'}}</view>
			    <view class="numTitle">金额</view>
			    <input placeholder="请输入兑换金额" class="input-prop" placeholder-class="placeholder" type="number" v-model="amount"/>
				<view class="sures" @tap="sure">确定</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { billPage, transferToBalance, balanceToHappyBean,getLockMechanism } from '../../api/api.js'
	export default {
		data() {
			return {
				index:0,
				navList:['多多券','购物券','兑换券','兑换额','积分','数字积分','多贝','提货券'],
				list:[],
				pageNum:1,
				pageSize:20,
				pages:'',
				isProp:false,
				amount:'',
				LockMechanismList:[],
				level:1
			}
		},
		onLoad(e) {
			this.index = Number(e.index)
			this.level = e.level
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 获取列表
			this.getList()
			// 获取多贝转化金额
			this.getLockMechanism()
		},
		onReachBottom() {
			if(this.pages <= this.pageNum) {
				uni.showToast({
					icon:'none',
					title:'暂无更多~'
				})
				return
			}else {
				this.pageNum ++
				// 获取列表
				this.getList()
			}
		},
		methods: {
			getLockMechanism() {
				let data = {}
				getLockMechanism(data).then( res=> {
					this.LockMechanismList = res.data
					console.log(this.LockMechanismList,'this.LockMechanismListthis.LockMechanismList')
				})
			},
			bindPickerChange: function(e) {
			    this.index = e.detail.value
				this.pageNum = 1
				this.list = []
				// 获取列表
				this.getList()
			},
			exchange(type) {
				this.isProp = true
				// 多多券兑换多贝
				// if( this.index == 0 ) {
				// 	this.LockMechanismList.forEach(item => {
				// 		if( item.level == this.level ) {
				// 			this.amount = item.lockAmount
				// 		}
				// 	})
				// 	let data = {
				// 		amount:this.amount,
				// 	}
				// 	balanceToHappyBean(data).then( res=> {
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:'兑换成功，请等待审核~'
				// 		})
				// 		this.pageNum = 1
				// 		this.list = []
				// 		// 获取列表
				// 		this.getList()
				// 		this.amount = ''
				// 		this.isProp = false
				// 	})
				// }else {
				// 	this.isProp = true
				// }
				
			},
			closeProp() {
				this.isProp = false
			},
			// 获取列表
			getList() {
				let data = {
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					type:this.index + 1
				}
				billPage(data).then( res=> {
					this.list = this.list.concat(res.data.records)
					this.pages = res.data.pages
				})
			},
			// 提交
			sure() {
				if( !this.amount ){
					uni.showToast({
						icon:'none',
						title:'请输入兑换金额'
					})
					return false
				}
				let data = {
					amount:this.amount,
				}
				// 多多券兑换多贝
				if( this.index == 0 ) {
					balanceToHappyBean(data).then( res=> {
						uni.showToast({
							icon:'none',
							title:'兑换成功，请等待审核~'
						})
						this.pageNum = 1
						this.list = []
						// 获取列表
						this.getList()
						this.amount = ''
						this.isProp = false
					})
				}else if( this.index == 3 || this.index == 2 ) {   // 兑换额/兑换卷兑换多多券
				    let data = {
					    amount:this.amount,
						type:this.index == 3?1:2      // 类型1兑换额2兑换券
				    }
					transferToBalance(data).then( res=> {
						uni.showToast({
							icon:'none',
							title:'兑换成功，请等待审核~'
						})
						this.pageNum = 1
						this.list = []
						// 获取列表
						this.getList()
						this.amount = ''
						this.isProp = false
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
  .content {
		display: flex;
		align-items: center;
		flex-direction: column;
		
		.top-content {
			padding: 30rpx 30rpx 0 30rpx;
			width: 690rpx;
			height: 140rpx;
			background-color: #FE3B33;
			.typeContent {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.change {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #A7CBFF;
					line-height: 42rpx;
				}
				.cords {
					text-align: center;
					width: 140rpx;
					height: 56rpx;
					border-radius: 8rpx;
					border: 1rpx solid #FFFFFF;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
				}
			}
			.currency {
				margin-top: 20rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;
			}
		}
		
		.item {
			margin-top: 35rpx;
			padding-bottom: 24rpx;
			width: 690rpx;
			border-bottom: 1rpx solid #F2F2F2;
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
				}
				.price {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #408FFF;
					line-height: 45rpx;
				}
			}
			.time {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 33rpx;
			}
			.status {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FA2F30;
				line-height: 33rpx;
			}
		}
		.noneContent {
			display: flex;
			align-items: center;
			flex-direction: column;
			.noneImg {
				margin-top: 132rpx;
				width: 320rpx;
				height: 291rpx;
			}
			.tips {
				margin-top: 36rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B8B8B8;
				line-height: 33rpx;
			}
		}
		.prop {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(26, 26, 26, 0.45);
			.buyProp {
				padding-bottom: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.closeImg {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: 37rpx;
					right: 25rpx;
				}
				
				.title {
					margin-top: 38rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.numTitle {
					margin-top: 46rpx;
					width: 470rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}
				.input-prop {
					margin-top: 12rpx;
					height: 88rpx;
					width: 470rpx;
					border-bottom:1rpx solid #F2F2F2 ;
				}
				.placeholder {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}
				.sures {
					margin-top: 60rpx;
					text-align: center;
					line-height: 86rpx;
					width: 470rpx;
					height: 86rpx;
					background: #FE3B33;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.codes {
					position: absolute;
					right: 43rpx;
					bottom: 210rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					line-height: 33rpx;
				}
			}
		}
	}
</style>
